<template>
    <h3>模板语法</h3>
    <p>{{ msg }}</p>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'Yes' : 'NO' }}</p>
    <p>{{ message.split("").reverse().join("") }}</p>
    <p>{{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
    <div v-bind:id="dynamicId" v-bind:class="dynamicclass">Attribute 绑定(属性绑定)</div>
    <div v-bind="objectOfAttrs">多Attribute 绑定(多属性绑定)</div>
</template>
<script>
export default {
    data() {
        return {
            msg: "神奇的语法",
            number: 10,
            ok: true,
            message: "大家好",
            rawHtml: "<a href='https://itbaizhan.com'>百战程序员</a>",
            dynamicId: "appid",
            dynamicclass: "appclass",
            objectOfAttrs: {
                id: "container",
                class: "wrapper"
            }
        };
    }
}
</script>
<style>
.appclass {
    color: red;
    font-size: 30px;

}
</style>